<template>
  <div>
    <a-button v-if="displayType === 'BUTTON'" type="primary" @click="showModal">{{ text }}</a-button>
    <a class="gb-display-block" v-if="displayType === 'LINK'" @click="showModal">{{ text }}</a>
    <a-modal
        :title="text+'科室'"
        centered
        :maskClosable="false"
        :width="800"
        v-model="visible"
        :okText="$t('modal_submit')"
        :cancelText="$t('modal_cancel')"
        @ok="handleOk"
        :okButtonProps="okButtonProps"
    >
      <a-form :form="form">
        <a-form-item
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :colon="false" label="科室编码"
        >
          <a-input
              v-decorator="[
              'departmentCode',
              { initialValue:row.departmentCode, rules: [{ required: true, message: $t('please_input') + '科室编码' + $t('exclamation_mark') }] }
            ]"
              placeholder="科室编码"
          />
        </a-form-item>

        <a-form-item
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :colon="false" label="科室名称"
        >
          <a-input
              v-decorator="[
              'departmentName',
              { initialValue:row.departmentName, rules: [{ required: true, message: $t('please_input') + '科室名称' + $t('exclamation_mark') }] }
            ]"
              placeholder="科室名称"
          />
        </a-form-item>


        <a-form-item
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :colon="false" label="单位"
        >
          <UnitSelector :ts="ts"
                        v-decorator="[
              'unitId',
              { initialValue:row.unitId, rules: [{ required: true, message: $t('please_input') + '单位' + $t('exclamation_mark') }] }
            ]"
                        placeholder="单位"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  props: {
    text: { type: [String] },
    displayType: { type: [String], default: 'BUTTON' },
    callback: { type: [Function] },
    row: { type: [Object], default: () => { return {} } },
    url: { type: [String] },
  },
  data() {
    return {
      form: this.$form.createForm(this, {name: this._uid}),
      visible: false,
      okButtonProps: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      ts: 0,
    }
  },
  methods: {
    showModal() {
      this.form.resetFields();
      this.visible = true
      this.okButtonProps = {}
      this.ts = new Date().getTime()
    },
    handleOk() {
      this.form.validateFields((err, formValue) => {
        if (err) {
          return;
        }

        this.okButtonProps ={ props: {disabled: true} }
        // submit
        axios({
          method: 'post',
          url: this.url,
          data: {
            id: this.row.id,
            ...formValue
          },
        }).then(() => {
          this.visible = false
          if(this.callback) {
            this.callback();
          }
          this.$success({
            title: this.$t('success_message'),
            content: this.$t('submit_success'),
            okText: this.$t('modal_ok'),
          });
        }).catch(() => {
          this.okButtonProps = {}
        });

      });
    },
  }
}
</script>
